<template>
  <div class="ElectricProgressBar">
  <!-- :class="getBarClass(obj.METERIALSTATUS)" -->
    <div  :class="getBarClass(obj.METERIALSTATUS)">
      <div v-if="current != 0" :class="getProClass(obj.METERIALSTATUS)" :style="'width:'+ current/max*100+'%'"></div>
    </div>
    <!-- <div class="item1"></div> -->
  </div>
</template>

<script>
  export default {
    props: {
      current: {
        type: Number,
        default: 0
      },
      max: {
        type: Number,
        default: 100
      },
      obj: {
         type: Object,
        default: null
      }
    },
    data() {
      return {
        barMax: 50
      }
    },
    methods: {
      getBarClass(val) {
        if (val == 0) {
          // return "缺料"
          return 'pro-w'
        }
        if (val == 1) {
          // return "正常"
          return 'pro-w-green'
        }
        if (val == 2) {
          // return "补料"
          return 'pro-w-green'
        }
        
      },
      getProClass(val) {
      if (val == 0) {
          // return "缺料"
          return 'dc-red'
        }
        if (val == 1) {
          // return "正常"
          return 'dc-red'
        }
        if (val == 2) {
          // return "补料"
          return 'dc-red'
        }
      },
      showdl(idx) {
        if (idx <= (this.current / this.max * this.barMax)) {
          return 'item'
        } else {
          return ''
        }
      }
    },
  }

</script>

<style lang="scss">
  .ElectricProgressBar {
    margin-top: 10px;
    display: flex;

    .dc {
      // background-image: url("../../../assets/icon_jx.png");
      // background: linear-gradient(270deg, #2B4C71, #396076);
      // width:12px;
      // height:40px

      background: linear-gradient(270deg, #2B4C71, #396076);
      width:12px;
      height:40px
    }

     .dc-green {
   

          background: linear-gradient(270deg, green, green);
      width:12px;
      height:40px
    }

     .dc-red {
     

          background: linear-gradient(270deg, red, red);
      width:12px;
      height:40px
    }

    .pro-w {
      height: 20px;
      background: linear-gradient(270deg, #1D334D, #1A2F46);
      display: flex;
      width: 280px;
      margin-right: 2px;
      overflow: hidden;
    }

    .pro-w-red {
      height: 20px;
      background: red;
      display: flex;
      width: 280px;
      margin-right: 2px;
      overflow: hidden;
    }
    .pro-w-green {
      height: 20px;
      background: green;
      display: flex;
      width: 280px;
      margin-right: 2px;
      overflow: hidden;
    }

    .item0 {
      width: 10px;
      height: 20px;
      background: #FF6D32;
      margin-right: 5px;

    }

    .item {
      background: #2A4A62;
      width: 5px;
      margin-right: 3px;
    }

    .item1 {
      width: 3px;
      height: 20px;
      background: #FF6D32;
    }
  }

</style>
